.mine {
  .ml-5 {
    margin-left: 10rpx;
  }

  .mt-17 {
    margin-top: 34rpx;
  }

  .ml-11 {
    margin-left: 22rpx;
  }

  .ml-15 {
    margin-left: 30rpx;
  }

  .mr-5 {
    margin-right: 10rpx;
  }

  &.page {
    background: #fff;
    height: 100vh;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;

    .section {
      padding: 24rpx 28rpx 100rpx 28rpx;

      .coupon-center-container {
        background-color: #ffffff;
        border-radius: 16rpx;
        padding: 24rpx;
        box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05);

        // 顶部标题
        .header-title {
          text-align: center;
          margin-bottom: 32rpx;

          .title-text {
            display: block;
            font-size: 36rpx;
            font-weight: 700;
            color: #1d2129;
            margin-bottom: 8rpx;
          }

          .subtitle-text {
            font-size: 26rpx;
            color: #666666;
          }
        }

        // 优惠券列表
        .coupon-list {
          .coupon-item {
            display: flex;
            background: #ffffff;
            border: 1rpx solid #e8e8e8;
            border-radius: 16rpx;
            margin-bottom: 24rpx;
            overflow: hidden;
            box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

            &.claimed {
              opacity: 0.6;

              .claim-btn {
                background: #cccccc !important;
                color: #ffffff !important;
              }
            }

            // 左侧：券值
            .coupon-left {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
              padding: 32rpx 24rpx;
              min-width: 160rpx;
              position: relative;

              &::after {
                content: '';
                position: absolute;
                right: -8rpx;
                top: 50%;
                transform: translateY(-50%);
                width: 16rpx;
                height: 16rpx;
                background: #f8f8f8;
                border-radius: 50%;
                box-shadow: 0 0 0 4rpx #f8f8f8;
              }

              .coupon-value {
                display: flex;
                align-items: baseline;
                margin-bottom: 8rpx;

                .currency {
                  font-size: 32rpx;
                  color: #ffffff;
                  font-weight: 600;
                }

                .amount {
                  font-size: 48rpx;
                  color: #ffffff;
                  font-weight: 700;
                  line-height: 1;
                }
              }

              .condition {
                font-size: 22rpx;
                color: #ffffff;
                opacity: 0.9;
              }
            }

            // 右侧：券详情
            .coupon-right {
              flex: 1;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 24rpx;

              .coupon-info {
                flex: 1;
                margin-right: 24rpx;

                .coupon-name {
                  display: block;
                  font-size: 30rpx;
                  font-weight: 600;
                  color: #1d2129;
                  margin-bottom: 12rpx;
                }

                .validity {
                  font-size: 24rpx;
                  color: #666666;
                }
              }

              .claim-btn {
                background: #ff6b6b;
                color: #ffffff;
                border: none;
                border-radius: 24rpx;
                padding: 16rpx 32rpx;
                font-size: 26rpx;
                font-weight: 500;
                min-width: 120rpx;
                height: 64rpx;
                line-height: 32rpx;

                &::after {
                  border: none;
                }

                &.claimed {
                  background: #cccccc;
                  color: #ffffff;
                }

                &:active {
                  transform: scale(0.98);
                }
              }
            }
          }
        }

        // 底部提示
        .footer-tip {
          text-align: center;
          padding: 36rpx 0 24rpx;

          .tip-text {
            font-size: 26rpx;
            color: #9aa1a9;
          }
        }
      }
    }
  }
}